<template>
  <div class="page ad-upload">
    <mt-actionsheet :actions="actions" v-model="chooseImgVisible"></mt-actionsheet>
    <div class="scroll-view">
      <customHeader middleTitle="码卡龙"/>
      <div class="page-body">
        <div class="upload-wrap" @click="chooseImg">
          <div class="img-container">
            <div class="default-ad" v-show="!adUrl"></div>
            <img
              v-show="adUrl"
              :src="adUrl"
              alt
              @click="chooseImg"
              id="adImg"
              :class="imgSizeClass"
            >
          </div>
        </div>
        <div class="btn-wrap">
          <div class="btn" :class="{disabled:!adUrl}" @click="submit">提交</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import config from "../../base/profile/config.json";
import jsBridge from "../../tools/jsBridge";
import { Toast, MessageBox } from "mint-ui";
export default {
  name: "adUpload",
  data() {
    return {
      sn: "",
      chooseImgVisible: false,
      actions: [],
      adUrl: "",
      type: "",
      md5: "",
      size: null,
      imgSizeClass: "",
      imgDom: null
    };
  },
  methods: {
    //上传
    chooseImg: function() {
      const _this = this;
      _this.actions = [
        {
          name: "拍照",
          method: function() {
            jsBridge.selectPicture(
              { options: "拍照", noCrop: true,maxSize:{width:'768',height:'576'}},
              function(result) {
                _this.doUploadPic(result);
              },
              function(result) {

              }
            );
          }
        },
        {
          name: "选择图片",
          method: function() {
            jsBridge.selectPicture(
              {
                options: "选择图片",
                noCrop: true,
                maxSize:{width:'768',height:'576'}
              },
              function(result) {
                _this.doUploadPic(result);
              },
              function(result) {

              }
            );
          }
        }
      ];

      this.chooseImgVisible = true;
      return false;
    },
    doUploadPic: function(result) {
      const url = window.APP.serverUrl + "/newapp/img/uploadShopImg.do";
      const _this = this;

      jsBridge.uploadPic(
        {
          url: url,
          file: result.resultObject,
          data: {},
          crop: {},
          compress: { sizeLimit: "2", unit: "M" }
        },
        function(result) {
          //以下为正常的业务逻辑
          if (result && result.success) {
            const uploadResult = result.resultObject;
            if (uploadResult) {
              _this.adUrl = config.previewUrlPrefix + uploadResult.imageUrl;
              _this.type = uploadResult["type"];
              _this.md5 = uploadResult["md5"];
              _this.size = uploadResult["size"];
              return;
            }
          }
          const msg = result.msg || "上传失败";
          Toast(msg);
        },
        function(result) {

        }
      );
    },
    //提交
    submit() {

      if (!this.adUrl) {
        Toast("请上传图片");
        return;
      }
      this.submitRequest();
    },
    submitRequest() {
      const url = `app/voice/uploadAdsense.do?sn=${this.sn}&url=${
        this.adUrl
      }&type=${this.type}&md5=${this.md5}&size=${this.size}`;
      this.ajax({
        url: url,
        type: "get",
        controlLoading: true
      })
        .then(res => {
          if (res.success == true) {
            Toast("提交成功");
             this.$router.back();
          } else {
            Toast(res.msg);
          }
        })
        .catch(err => {

        });
    },
    //获取上次上传的图片信息
    getAdInfo() {
      const url = `app/voice/queryAdsensList.do?sn=${this.sn}`;
      this.ajax({
        url: url,
        type: "get",
        controlLoading: true
      })
        .then(res => {
          if (res.success == true) {
            if (res.resultObject && res.resultObject.length > 0) {
              this.adUrl = res.resultObject[0];
            }
          } else {
            Toast(res.msg);
          }
        })
        .catch(err => {

        });
    }
  },
  created() {
    this.sn = this.$route.query.sn;
    this.getAdInfo();
  },
  mounted() {
    this.imgDom = document.querySelector("#adImg");
  },
  components: {
    customHeader
  },
  watch: {
    adUrl() {
      const _this = this;
      this.$nextTick(function() {
        this.imgDom.onload = function() {
          if (this.naturalHeight < this.naturalWidth) {
            if(this.naturalWidth/this.naturalHeight<1.33){
              _this.imgSizeClass = "height-bigger";
            }else{
              _this.imgSizeClass = "width-bigger";
            }
          } else {
            _this.imgSizeClass = "height-bigger";
          }
        };
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "qrCodeSound";
</style>
